<template>
	<view class="Classes">
		<scroll-view :scroll-y="true" class="ScroViewClass" enable-back-to-top="true">

			<view class="cu-form-group">
				<view class="title">老师姓名</view>
				<input placeholder="请输入老师姓名" @input="onTeacherNameConfirm">
				<!--        <button class='cu-btn bg-blue shadow' @tap="studentNameCheck">查询</button>-->
			</view>

			<view class="cu-form-group">
				<view class="title">班级名称</view>
				<input placeholder="请输入班级名称" @input="onCourseNameConfirm">
			</view>

			<view class="cu-form-group">
				<view class="title">班级编号</view>
				<input placeholder="请输入班级编号" @input="onCourseNoConfirm">
			</view>

			<view class="cu-form-group">
				<view class="title">专业</view>
				<picker @change="onPickMajor" :value="curPickMajorIdx" :range="majorOpts" range-key="label">
					<view class="picker">
						{{curPickMajorIdx>-1?majorOpts[curPickMajorIdx].label:'请选择'}}
					</view>
				</picker>
			</view>

			<view class="cu-form-group">
				<view class="title">是否启用</view>
				<radio-group @change="onSelectStatus">
					<view class="flex">
						<view>
							<label class="text-sm">是</label>
							<radio :class="['radio','blue',curSelectStatus === '1' ? 'checked' : '']"
								:checked="curSelectStatus === '1'" value="1" style="transform: scale(0.8)">
							</radio>

							<label class="text-sm">否</label>
							<radio :class="['radio','blue',curSelectStatus === '0' ? 'checked' : '']"
								:checked="curSelectStatus === '0'" value="0" style="transform: scale(0.8)">
							</radio>
						</view>
					</view>
				</radio-group>
			</view>

			<view class="cu-form-group">
				<view></view>
				<button class="cu-btn bg-blue shadow" @tap="toAddCourse">
					新增<text class="cuIcon-add"></text>
				</button>
			</view>

			<view class="bg-white padding-sm">
				<view class="grid margin-bottom text-center text-sm text-bold col-5">
					<view class="table-title-bg padding flex-sub">编号</view>
					<view class="table-title-bg padding flex-twice">名称</view>
					<view class="table-title-bg padding flex-twice">老师</view>
					<view class="table-title-bg padding flex-twice">状态</view>
				</view>

				<view class="table-item grid margin-bottom text-center col-5 text-sm" v-for="item in RDCourseList"
					:key="item.COURSE_ID" @tap="toDetail(item.COURSE_ID+'')">
					<view class="padding flex-sub">{{item.COURSENO}}</view>
					<view class="coursename padding flex-twice text-blue">{{item.COURSENAME}}</view>
					<view class="padding flex-twice" style="word-break:break-all;">{{item.TEACHER_NAME}}</view>
					<view class="padding flex-sub">{{item.STATENR}}</view>
				</view>

				<view v-if="RDCourseList.length === 0" class="text-sm text-center">-- 暂无数据 --</view>
			</view>

			<view class="cu-form-group" v-if="totalPage > 0">
				<view class="title" @tap="firstPage()"><text class="check-info-btn">首页</text></view>
				<view class="title" @tap="lastPage()"><text class="check-info-btn">上一页</text></view>
				<view class="title">{{page}}/{{totalPage}}</view>
				<view class="title" @tap="nextPage()"><text class="check-info-btn">下一页</text></view>
				<view class="title" @tap="endPage()"><text class="check-info-btn">尾页</text></view>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import {
		usePagination
	} from "../../utils/usePagination";
	import {
		useRDCourseList
	} from "./useRDCourseList";
	import {
		computed,
		onMounted,
		ref
	} from "vue";
	import {
		useMajorList
	} from "../profile/useMajorList";
	import {
		onPullDownRefresh,
		onShow
	} from "@dcloudio/uni-app";
	import {
		useStore
	} from "vuex";

	const inputCourseNo = ref('')

	function onCourseNoConfirm(e: any) {
		const value = e.detail.value
		if (isNaN(value)) {
			uni.showToast({
				title: '请输入数字',
				icon: 'none',
				mask: true
			})
			return
		}
		inputCourseNo.value = value
		page.value = 1
	}

	const inputCourseName = ref('')

	function onCourseNameConfirm(e: any) {
		inputCourseName.value = e.detail.value
		page.value = 1
	}

	const inputTeacherName = ref('')

	function onTeacherNameConfirm(e: any) {
		inputTeacherName.value = e.detail.value
		page.value = 1
	}

	const curSelectStatus = ref < '1' | '0' > ('1')

	function onSelectStatus(e: any) {
		curSelectStatus.value = e.detail.value
		page.value = 1
	}

	const {
		initRDCourseList,
		RDCourseList,
		total
	} = useRDCourseList()

	const {
		majorOpts
	} = useMajorList()
	const curPickMajorIdx = ref(-1)

	function onPickMajor(e: any) {
		curPickMajorIdx.value = e.detail.value
		page.value = 1
	}

	const pageSize = 20
	const {
		page
	} = usePagination({
		page: 1,
		pageSize,
		onPageChange: initRDCourseList,
		startReachBottom: false,
		args: ref({
			COURSENO: inputCourseNo,
			COURSENAME: inputCourseName,
			TEACHER_NAME: inputTeacherName,
			STATE: curSelectStatus,
			MAJOR_ID: computed(() => curPickMajorIdx.value > -1 ? majorOpts[curPickMajorIdx.value].value :
				''),
		})
	})

	const totalPage = computed(() => parseInt(String(total.value / pageSize)) + (total.value % pageSize === 0 ? 0 : 1))

	function firstPage() {
		page.value = 1
	}

	function lastPage() {
		if (page.value > 1) {
			page.value--
		}
	}

	function nextPage() {
		if (page.value < totalPage.value) {
			page.value++
		}
	}

	function endPage() {
		page.value = totalPage.value
	}

	onPullDownRefresh(() => {
		page.value = -1
		page.value = 1
		curSelectStatus.value = '1'
		inputCourseName.value = ''
		inputCourseNo.value = ''
		inputTeacherName.value = ''
		curPickMajorIdx.value = -1
		uni.stopPullDownRefresh()
	})

	const {
		state
	} = useStore()

	function toDetail(COURSE_ID: string) {
		uni.navigateTo({
			url: `/pages/manage/classDetail?COURSE_ID=${COURSE_ID}`
		})
	}

	function toAddCourse() {
		uni.navigateTo({
			url: `/pages/manage/classDetail?COURSE_ID=0`
		})
	}

	onShow(() => {
		initRDCourseList(page.value, 20, {
			TEACHER_NAME: inputTeacherName.value,
			STATE: curSelectStatus.value,
			COURSENAME: inputCourseName.value,
			COURSENO: inputCourseNo.value
		})
		uni.$on('infoUpdate', () => {
			const oldPage = page.value
			page.value = -1
			page.value = oldPage
		})
	})
</script>

<style scoped lang="scss">
	.Classes {
		.cu-form-group .title {
			min-width: calc(4em + 15px);
		}

		.check-info-btn {
			color: #01AAED;
		}

		.ScroViewClass {
			min-height: 300rpx;
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
		}

		.table-title-bg {
			background-color: #DDDDDD;
		}

		.table-item:active {
			background-color: #DDDDDD;
		}

		.table-item {
			.coursename {
				text-decoration: underline;
				//overflow: hidden;
				//display: -webkit-box;
				//text-overflow: ellipsis;
				//-webkit-box-orient: vertical;
				//-webkit-line-clamp: 1;
			}
		}
	}
</style>
